<template>
    <!--    这个vue页面叫做 FileList 主要是展示文件的，被 File.vue 嵌套使用-->
    <div class="file-list-wrapper">
        <!-- 操作按钮 -->
        <el-header>
            <OperationMenu
                    :operationFile="operationFile"
                    :selectionFile="selectionFile"
                    :filePath="filePath().current()"
                    :batchOperate.sync="batchOperate"
                    @getSearchFileList="getSearchFileList"
                    @getTableDataByType="getTableDataByType"
                    @setMoveFileDialogData="setMoveFileDialogData"
            ></OperationMenu>
        </el-header>

        <div class="middle-wrapper">
            <!-- 面包屑导航栏 -->
            <BreadCrumb class="breadcrumb"></BreadCrumb>
        </div>

        <!-- 文件列表-表格模式 -->
        <FileTable
                :fileList="fileList"
                :loading="loading"
                v-if="fileModel().isTable()"
                @setMoveFileDialogData="setMoveFileDialogData"
                @setOperationFile="setOperationFile"
                @setSelectionFile="setSelectionFile"
                @getTableDataByType="getTableDataByType"
        ></FileTable>

        <!-- 文件列表-网格模式 -->
        <FileGrid
                :fileList="fileList"
                :loading="loading"
                :batchOperate="batchOperate"
                v-if="fileModel().isGrid()"
                @setMoveFileDialogData="setMoveFileDialogData"
                @setOperationFile="setOperationFile"
                @setSelectionFile="setSelectionFile"
                @getTableDataByType="getTableDataByType"
        ></FileGrid>
        <!-- 图片-时间线模式 -->
        <FileTimeLine class="image-model" v-if="fileModel().isTimeLine()" :fileList="fileList"></FileTimeLine>
        <div class="pagination-wrapper">
            <div class="current-page-count">当前页{{ fileList.length }}条</div>
            <el-pagination
                    :current-page="pageData.currentPage"
                    :page-size="pageData.pageCount"
                    :total="pageData.total"
                    :page-sizes="[10, 50, 100, 200]"
                    layout="sizes, total, prev, pager, next"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
            >
            </el-pagination>
        </div>
        <!-- 移动文件模态框 -->
        <MoveFileDialog
                :dialogMoveFile="dialogMoveFile"
                @setSelectFilePath="setSelectFilePath"
                @confirmMoveFile="confirmMoveFile"
                @setMoveFileDialogData="setMoveFileDialogData"
        ></MoveFileDialog>
    </div>
</template>

<script>
    import OperationMenu from './components/OperationMenu'
    import BreadCrumb from './components/BreadCrumb'
    import FileTable from './components/FileTable'
    import FileGrid from './components/FileGrid'
    import FileTimeLine from './components/FileTimeLine'
    import MoveFileDialog from './components/MoveFileDialog'

    import {
        getFileList,
        selectFileByFileType,
        getRecoveryFile,
        getFileTree,
        moveFile,
        batchMoveFile,
        searchFile,
    } from '@/request/file.js'


    export default {
        name: 'FileList',
        components: {
            OperationMenu,
            BreadCrumb,
            FileTable,
            FileGrid,
            FileTimeLine,
            MoveFileDialog
        },
        data() {
            return {
                fileNameSearch: '',
                loading: true, //  表格数据-loading
                fileList: [], //  表格数据-文件列表
                pageData: {
                    currentPage: 1,
                    pageCount: 10,
                    total: 0
                },
                //  移动文件模态框数据
                dialogMoveFile: {
                    isBatchMove: false,
                    visible: false, //  是否可见
                    fileTree: [] //  目录树
                },
                selectFilePath: Number, //  移动文件路径
                operationFile: {}, // 当前操作行
                selectionFile: [], // 勾选的文件
                batchOperate: false //  批量操作模式
            }
        },
        computed: {
            //  当前查看的文件路径
            currentPath: {
                get() {
                    return this.$route.query.pid
                },
                set() {
                    return this.ROOT_PATH
                }
            },
            // 文件类型
            currentFileType: {
                get() {
                    return this.$route.query.fileType
                },
                set() {
                    return this.FILE_TYPE.ALL
                }
            },
            // 文件查看模式 0列表模式 1网格模式 2 时间线模式
            currentFileModel() {
                return this.$store.getters.fileModel
            },
        },
        watch: {
            currentPath() {
                if (this.isLoginPage()){
                    return
                }
                this.getTableDataByType()
                this.setPageCount()
            },
            currentFileType(newValue, oldValue) {
                if (this.isLoginPage()){
                    return
                }
                if (oldValue === this.FILE_TYPE.IMAGE && this.fileModel().isTimeLine()) {
                    this.$store.commit('changeFileModel', this.FILE_MODEL.TABLE)
                }
                this.getTableDataByType()
                this.setPageCount()
            },
            // 监听文件查看模式
            currentFileModel() {
                this.getTableDataByType()
                this.setPageCount()
            }
        },
        created() {
            this.$store.dispatch('fetchPathTreeMap')
            this.setPageCount()
            this.getTableDataByType()
        },
        methods: {
            /**
             * 表格数据获取相关事件
             */
            reflushFileList(res) {
                this.loading = false
                this.fileList = res.data
                this.pageData.total = res.total
            },
            // 调整分页大小
            setPageCount() {
                this.pageData.currentPage = 1
                if (this.fileModel().isTable()) {
                    this.pageData.pageCount = 10
                }
                if (this.fileModel().isGrid()) {
                    this.pageData.pageCount = 40
                }
            },
            // 获取文件列表数据
            getTableDataByType() {
                this.batchOperate = false
                this.loading = true

                // 分类型
                if (this.fileType().isNotAll()) {
                    if (this.fileType().isRecycle()) {
                        this.showFileRecovery() //  回收站
                    } else {
                        this.showFileListByType()
                    }
                } else {
                    // 全部文件
                    this.showFileList()
                }
            },
            // 获取当前路径下的文件列表
            showFileList() {
                let data = {
                    currentPage: this.pageData.currentPage,
                    pageCount: this.pageData.pageCount
                }
                if (this.currentPath != null){
                    data.pid = this.currentPath
                }

                getFileList(data).then((res) => {
                    this.reflushFileList(res)
                }).catch(err => {
                    console.log(err)
                    this.$message.error("服务器正忙")
                })
            },
            // 分页组件 当前页码改变
            handleCurrentChange(currentPage) {
                this.pageData.currentPage = currentPage
                this.getTableDataByType()
            },
            handleSizeChange(pageCount) {
                this.pageData.pageCount = pageCount
                this.getTableDataByType()
            },
            // 获取回收站文件列表
            showFileRecovery() {
                let data = {
                    currentPage: this.pageData.currentPage,
                    pageCount: this.pageData.pageCount
                }
                getRecoveryFile(data).then((res) => {
                    this.reflushFileList(res)
                }).catch(err =>{
                    console.log(err)
                    this.$message.error("服务器正忙")
                })
            },
            // 根据文件类型展示文件列表
            showFileListByType() {
                //  分类型
                let data = {
                    currentPage: this.pageData.currentPage,
                    pageCount: this.pageData.pageCount,
                    fileType: this.fileType().current()
                }
                selectFileByFileType(data).then((res) => {
                    this.reflushFileList(res)
                }).catch(err => {
                    console.log(err)
                    this.$message.error("服务器正忙")
                })
            },

            /**
             * 表格勾选框事件
             */
            //  勾选的行
            setSelectionFile(selection) {
                this.selectionFile = selection
            },

            /**
             * 移动按钮相关事件
             */
            //  当前操作行
            setOperationFile(operationFile) {
                this.operationFile = operationFile
            },
            //  设置移动文件模态框相关数据，isBatchMove为null时是确认移动，值由之前的值而定
            setMoveFileDialogData(isBatchMove, visible) {
                this.initFileTree()
                this.dialogMoveFile.isBatchMove = isBatchMove ? isBatchMove : this.dialogMoveFile.isBatchMove
                this.dialogMoveFile.visible = visible
            },
            //  移动文件模态框：初始化文件目录树
            initFileTree() {
                getFileTree().then((res) => {
                    this.dialogMoveFile.fileTree = [res]
                }).catch(err => {
                    console.log(err)
                    this.$message.error("服务器正忙")
                })
            },
            //  设置移动后的文件路径
            setSelectFilePath(selectFilePath) {
                this.selectFilePath = selectFilePath
            },
            //  移动文件模态框-确定按钮事件
            confirmMoveFile() {
                if (this.dialogMoveFile.isBatchMove) {
                    //  批量移动
                    let data = {
                        from: this.selectionFile.flatMap(row => row.id),
                        to: this.selectFilePath
                    }
                    if (!data.to) {
                        delete data.to
                    }
                    batchMoveFile(data).then(() => {
                        this.$message.success("文件移动成功")
                        this.getTableDataByType()
                        this.dialogMoveFile.visible = false
                        this.selectionFile = []
                        this.$store.dispatch('fetchPathTreeMap')
                    }).catch(err => {
                        console.error(err)
                        this.$message.error("系统忙，移动失败")
                    })
                } else {
                    //  单文件移动
                    let data = {
                        from: this.operationFile.id,
                        to: this.selectFilePath,
                    }
                    if (!data.to) {
                        delete data.to
                    }
                    moveFile(data).then(() => {
                        this.$store.dispatch('fetchPathTreeMap')
                        this.$message.success('移动文件成功')
                        this.getTableDataByType()
                        this.dialogMoveFile.visible = false
                    }).catch(err => {
                        console.error(err)
                        this.$message.error("系统忙，移动失败")
                    })
                }
            },
            // 获取搜索文件结果列表
            getSearchFileList(filename) {
                this.loading = true
                searchFile({
                    currentPage: this.pageData.currentPage,
                    pageCount: this.pageData.pageCount,
                    filename: filename
                }).then(res => {
                    this.reflushFileList(res)
                }).catch(err => {
                    console.error(err)
                    this.$message.error("服务器正忙")
                })
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~@/assets/styles/varibles.styl'
    .file-list-wrapper
        >>> .el-header
            padding 0

        .middle-wrapper
            margin-bottom 8px

        .pagination-wrapper
            position relative
            border-top 1px solid $BorderBase
            height 44px
            line-height 44px
            text-align center

            .current-page-count
                position absolute
                left 16px
                height 32px
                line-height 32px
                font-size 13px
                color $RegularText
</style>
